<template>
  <div class="data-show">
    <!-- 顶部导航栏 -->
    <Header title="数据调查局" />
    <form class="container">
      <input
        id="scroll"
        class="input-btn"
        type="radio"
        name="valueIs-radio"
        :checked="this.$route.name === 'db-scroll'"
        @click="$router.push('scroll')"
      />
      <label class="neon-btn" for="scroll">
        <span class="span" />
        <span class="txt">数据统计</span>
      </label>
      <input
        id="time"
        class="input-btn"
        type="radio"
        name="valueIs-radio"
        :checked="this.$route.name === 'db-time'"
        @click="$router.push('time')"
      />
      <label class="neon-btn" for="time">
        <span class="span" />
        <span class="txt">国家政策</span>
      </label>
    </form>

    <router-view />
  </div>
</template>

<script>
export default {
  name: 'Databases',
  components: {
    Header: () => import('@/components/header')
  },
  data() {
    return {
      // btnList: [
      //   {
      //     id: 'scroll',
      //     routeName: 'db-scroll',
      //     title: '数据统计'
      //   },
      //   {
      //     id: 'time',
      //     routeName: 'db-time',
      //     title: '国家政策'
      //   }
      // ]
    }
  },
  mounted() {},
  methods: {
    // changeView(name) {
    //   this.$router.push({ name })
    // }
  }
}
</script>

<style scoped>
.data-show {
  height: 100vh;
  overflow: hidden;
  background: url('https://demo-oss-video.oss-cn-fuzhou.aliyuncs.com/image/disaster_normal.jpg?x-oss-process=style/process_blur')
    no-repeat center;
  background-size: cover;
}

/** 导航按钮 */
.container {
  position: absolute;
  z-index: 100;
  display: grid;
  gap: 2em;
  place-content: center;
  width: 0;
  margin-left: -150px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 1.2em;
  font-style: italic;
  font-weight: bold;
  transition: transform 0.5s ease-out;
}

.container:hover {
  transform: translateX(150px);
}

.container input[type='radio'] {
  display: none;
}

.input-btn:is(:checked) + .neon-btn .span {
  inset: 2px;
  background-color: #0efcff;
}

.input-btn:is(:checked) + .neon-btn .txt {
  color: rgb(255 255 255);
  text-shadow: 2px 4px 1px #9e30a9, 2px 2px 1px #4090b5,
    0 0 20px rgb(255 255 255 / 61.6%);
  animation: colorchange 0.3s ease;
}

.input-btn:is(:checked) + .neon-btn::before {
  animation-duration: 0.6s;
}

.input-btn:is(:checked) + .neon-btn::after {
  animation-duration: 0.6s;
}

.neon-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 60px;
  padding: 0.5em 5em;
  overflow: hidden;
  clip-path: polygon(
    6% 0,
    93% 0,
    100% 8%,
    100% 86%,
    90% 89%,
    88% 100%,
    5% 100%,
    0% 85%
  );
  text-align: right;
  cursor: pointer;
  background: transparent;
  transition: all 2s ease-in-out;
}

.neon-btn .span {
  position: absolute;
  inset: 1px;
  z-index: 1;
  display: flex;
  clip-path: polygon(
    6% 0,
    93% 0,
    100% 8%,
    100% 86%,
    90% 89%,
    88% 100%,
    5% 100%,
    0% 85%
  );
  background-color: #212121;
}

.neon-btn .txt {
  position: relative;
  z-index: 2;
  margin-left: 200px;
  font-size: 1em;
  color: aliceblue;
  text-align: right;
  text-shadow: 0 0 1px #4090b5, 0 0 1px #9e30a9, 0 0 1px white;
  transition: all ease-in-out 2s linear;
}

.neon-btn::before {
  position: absolute;
  height: 300px;
  aspect-ratio: 1.5/1;
  content: '';
  background-image: conic-gradient(
    #9e30a9,
    transparent,
    transparent,
    transparent,
    transparent,
    transparent,
    transparent,
    #9e30a9
  );
  box-shadow: -17px -19px 20px #9e30a9;
  animation: rotate 4s linear infinite -2s;
}

.neon-btn::after {
  position: absolute;
  height: 300px;
  aspect-ratio: 1.5/1;
  content: '';
  background-image: conic-gradient(
    #4090b5,
    transparent,
    transparent,
    transparent,
    transparent,
    transparent,
    transparent,
    transparent,
    #4090b5
  );
  box-shadow: -17px -19px 10px #4090b5;
  animation: rotate 4s linear infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes colorchange {
  0% {
    text-shadow: 0 0 0 #9e30a9, 0 0 0 #4090b5, 0 0 0 rgb(255 255 255 / 61.6%);
  }

  50% {
    text-shadow: -6px 5px 1px #9e30a9, 5px 11px 1px #4090b5,
      0 0 20px rgb(255 255 255 / 61.6%);
  }

  100% {
    text-shadow: 2px 4px 1px #9e30a9, 2px 2px 1px #4090b5,
      0 0 20px rgb(255 255 255 / 61.6%);
  }
}

@keyframes backgroundchange {
  0% {
    background-color: transparent;
  }

  50% {
    background-color: #4090b5;
  }

  100% {
    background-color: transparent;
  }
}
</style>
